
<script setup>
const title={
	Text1:'Hi Shasha',
	Text2:"Good Moming!"
}
</script>

<template>
	<view class="content">
		
	<Heart :title='title'></Heart>
		
		<div class="content_Image">
			<image src="../../static/login/loginicon.png" mode="aspectFill"></image>
			<h2>欢迎来到宠物屋</h2>
		</div>
		
		<div class="login_form">
			<div class="weixin">
				<button class="button">
					<uni-icons type="weixin" size="20"></uni-icons>
					微信登录
				</button>
			</div>
			<div class="phone">
				<button class="button">
					<uni-icons type="phone-filled" size="20"></uni-icons>
					手机号登录
				</button>
			</div>
			<div class="radio">
				<radio-group>
				<radio style="transform: scale(0.7);"></radio>
				</radio-group>
				<p style="display: flex;">
					我已阅读并同意宠物屋
				<navigator style="color: #ffe585;">《用户协议》</navigator>和<navigator style="color: #ffe585;">《隐私政策》</navigator>
				</p>
			</div>
		</div>
		
		<view class="left">
			<image src="../../static/login/left.png" mode=""></image>
		</view>
		<view class="right">
			<image src="../../static/login/right.png" mode=""></image>
		</view>
		<view class="botton">
			<image src="../../static/login/botton.png" mode=""></image>
		</view>
	</view>
</template>


<style lang="scss" scoped>

.nav_text{
	padding-top: 80rpx;
	margin-left: 30rpx;
	.P_1{
		font-size: 40rpx;
	}	
	.P_2{
		font-size: 28rpx;
	}
}

.content_Image{
	width: 270rpx;
	height: 280rpx;
	margin-top: 170rpx;
	margin-left: 50%;
	transform: translateX(-50%);
	font-weight: 600;
	text-align: center;
	image{
		width: 100%;
		height: 100%;
	}
}
.radio{
	color: #c5c3b1;
	font-size: 25rpx;
	display: flex;
		line-height: 60rpx;
		margin-left: 40rpx;
}
.login_form{
	margin-top: 150rpx;
	.button{
		width: 632rpx;
		height: 96rpx;
		font-size: 32rpx;
		font-weight: 700;
       margin-top: 40rpx;
		margin-bottom: 20rpx;
		border-radius: 60rpx;
		border: 5rpx solid black;
		line-height: 90rpx;
		background-color: #ffeb3b;
	}
}

.left,.right,.botton{
	position: absolute;

	width: 140rpx;
	height: 140rpx;
image{
	width: 100%;
	height: 100%;
}
}
.left{
	top: 200rpx;
	left: -40rpx;
}
.right{
	top: 540rpx;
	right:-35rpx;
}
.botton{
	left: 0;
	bottom: 0;
}
</style>
